<template>
  <div class="echarts-outer-wrapper flex-cloumn width-620">
    <Title
      title="本年税费收入(分单位)"
      time="2"
      timePosition="left"
      dw="单位：亿元"
    ></Title>
    <div class="flex1" @click="viewRecords($event)">
      <vue-seamless-scroll
        :data="swiperListArr"
        :class-option="classOptionArr"
        class="table-content-income"
      >
        <div
          class="list-item"
          v-for="(item, index) in swiperListArr"
          :key="index"
        >
          <div
            class="city-name"
            :style="{ backgroundColor: item.bgcColor }"
            :data="JSON.stringify(item)"
          >
            <div class="name">{{ item.zgswjgmc }}</div>
          </div>
          <div class="detail-wrapper">
            <div class="label">本月累计税费收入</div>
            <div class="value">{{ item.yljje }}</div>
            <div class="label">本年累计税费收入</div>
            <div class="value">{{ item.nljje }}</div>
          </div>
        </div>
      </vue-seamless-scroll>
      <div class="echart-detail-modal" v-show="incomeModalShow">
        <div class="title">{{ incomeModalTitle }}</div>
        <div class="close" @click="incomeLeaver">X</div>
        <div class="detail-list-wrapper">
          <div
            class="detail-list"
            v-for="(item, index) in incomeModalList"
            :key="index"
          >
            <div class="item hang">{{ item.zgswksmc }}</div>
            <div class="item name">本月累计</div>
            <div class="item money">{{ item.yljje }}</div>
            <div class="item name">本年累计</div>
            <div class="item money">{{ item.nljje }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from "@/components/title";

export default {
  name: "aqjsfsr",
  components: {
    Title,
  },
  data() {
    return {
      prevDate: "",
      select: 0,
      myChart: null,
      option: {},
      swiperListArr: [],
      colorList: [
        "#002a88",
        "#275eb4",
        "#a6741c",
        "#0b379c",
        "#2a7d39",
        "#554e05",
        "#3131a5",
        "#246897",
        "#e48819",
        "#e43129",
        "#e57a19",
        "#e12619",
        "#e43799",
        "#e28d19",
        "#e462e9",
        "#e413d9",
        "#e4a3c9",
        "#e12119",
      ],
      classOptionArr: {
        limitMoveNum: 1, // 开启无缝滚动的数据量
        singleHeight: 30,
        waitTime: 0,
        step: 0.5,
        hoverStop: true,
      },
      incomeModalShow: false,
      incomeModalTitle: "",
      incomeModalList: [],
    };
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
  },
  mounted() {
    this.ajax({
      url: "/dpzsSrcxService/aqjsfsrQuery",
      method: "post",
      data: {
        param: {
          tjny: this.prevDate,
        },
      },
    }).then((res) => {
      res = res.data;
      if (res.rtnCode !== "200") {
        this.$message.error(res.rtnMsg);
        return;
      }
      let data = res.data.sjjgList;
      this.swiperListArr = data;
      this.swiperListArr.forEach((item, index) => {
        this.$set(item, "bgcColor", this.colorList[0]);
      });
    });
  },
  methods: {
    viewRecords(e) {
      const path = e.path || (e.composedPath && e.composedPath());
      let target = path.filter((r) => /button-wrapper/.test(r.className));
      if (target.length) target = target[0];
      else return;
      const data = JSON.parse(target.getAttribute("data")); // 单项数据详情
      // 跳转详情页面
      this.incomeModalTitle = data.cityName;
      this.incomeModalList = data.xjjgList;
      this.incomeModalShow = true;
    },
    incomeLeaver() {
      this.incomeModalShow = false;
      this.incomeModalTitle = "";
    },
  },
};
</script>

<style scoped lang="scss">
.echarts-outer-wrapper {
  width: 616px;
  height: 476px;
}
.table-content-income {
  height: 418px;
  overflow: hidden;
  .list-item {
    width: 510px;
    height: 45px;
    background-image: url(~@/assets/images/bg-item-2.png);
    background-size: 100% 100%;
    margin: 0 auto 6px;
    display: flex;
    align-items: center;
    .city-name {
      margin-left: 8px;
      width: 60px;
      height: 28px;
      background-color: #275eb4;
      transform: skewX(-30deg);
      .name {
        width: 60px;
        height: 28px;
        line-height: 28px;
        font-size: 14px;
        color: #ffffff;
        top: 0;
        left: 0;
        z-index: 1;
        transform: skewX(30deg);
        cursor: pointer;
        text-align: center;
      }
    }
    .detail-wrapper {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      .label {
        flex: 0 0 140px;
        width: 140px;
        font-size: 15px;
        color: #ffffff;
      }
      .value {
        font-size: 18px;
        flex: 0 0 60px;
        width: 60px;
        font-weight: 700;
        color: rgba(251, 230, 113, 1);
      }
    }
  }
}
.echart-detail-modal {
  width: 420px;
  height: 300px;
  transform: translate(-210px, -150px);
  .money {
    color: rgba(251, 230, 113, 1);
    width: 80px;
    flex: 0 0 80px !important;
  }
  .name {
    width: 100px;
    flex: 0 0 100px !important;
  }
}
</style>
